<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>课程管理系统</title>
    <style>
        *{
            line-height: 50px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div>
        <form action="/index" method="post">
            <table border="1px">
                <tr>
                    <td colspan="8" >课程管理列表</td>
                </tr>
                <tr>
                    <td colspan="2">
                        关键字：<input type="text" placeholder="输入课程名称，标题进行搜索" name="keyword" th:value="${keyword}">
                    </td>
                    <td colspan="2">
                        课程类型：<select name="courseTypeId" id="">
                        <option value="0">全部</option>
                        <option th:each="type:${typeList}" th:text="${type.courseType}" th:value="${type.id}" th:selected="${type.id==typeId}"></option>
                    </select>
                    </td>
                    <td colspan="2">
                        上下架:  <select name="status">
                        <option value="0">全部</option>
                        <option value="1" th:selected="${status==1}">上架</option>
                        <option value="2" th:selected="${status==2}">下架</option>
                    </select>
                    </td>
                    <td>
                        <input type="submit" value="搜索">
                    </td>
                    <td>
                        <input type="button" value="新增课程">
                    </td>
                </tr>
                <tr>
                    <td align="center" colspan="8">
                        课程类型列表
                    </td>
                </tr>
                <tr>
                    <td>课程名称</td>
                    <td>课程标题</td>
                    <td>课程类型</td>
                    <td>课程状态</td>
                    <td>上下架时间</td>
                    <td>创建时间</td>
                    <td>修改时间</td>
                    <td>操作</td>
                </tr>
                <tr th:each="page:${pageList}">
                    <td th:text="${page.courseName}"></td>
                    <td th:text="${page.courseTitle}"}></td>
                    <td th:text="${page.courseType.getCourseType}"></td>
                    <td th:if="${page.status==1}">上架</td>
                    <td th:if="${page.status==2}">下架</td>
                    <td th:text="${#dates.format(page.upDownDate, 'yyyy-MM-dd HH:mm:ss')}"></td>
                    <td th:text="${#dates.format(page.createDate, 'yyyy-MM-dd HH:mm:ss')}"></td>
                    <td th:text="${#dates.format(page.updateDate, 'yyyy-MM-dd HH:mm:ss')}"></td>
                    <td>
                        <a href="#" th:if="${page.status==2}" th:onclick="upDown(this,[[${page.getId}]])">上架</a>
                        <a href="#" th:if="${page.status==1}" th:onclick="'javascript: upDown(this,'+${page.getId}+')'">下架</a>
                            <a href="javascript:void(0)">修改</a>
                            <a href="javascript:void(0)">删除</a>
                    </td>
                </tr>
                <tr>
                    <td colspan="8">
                        <a th:if="${nowPage>1}" th:href="@{/index/(keyword=${keyword},pageIndex=${nowPage-1},courseTypeId=${typeId},status=${status})}">上一页</a>
                        <a th:if="${nowPage<total}" th:href="@{/index/(keyword=${keyword},pageIndex=${nowPage+1},courseTypeId=${typeId},status=${status})}">下一页</a>
                        <span th:text="${nowPage}"></span>/
                        <span th:text="${total}"></span>
                    </td>
                </tr>
            </table>
        </form>
    </div>

</body>
<script src="/jquery-1.8.0.min.js"></script>
<script>
    function upDown(ts,id) {

       $.get("/upDown","id="+id,function () {
          var up = $(ts).parent().prev().prev().prev().prev().text()
           alert(up)
          if (up=="上架"){
              $(ts).parent().prev().prev().prev().prev().text("下架")
              $(ts).text("上架")
          }else{
              $(ts).parent().prev().prev().prev().prev().text("上架")
              $(ts).text("下架")
          }
       })
    }
</script>
</html>
